<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <!-- 满足有些用户在手机端访问的需要 -->

    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">

    <title>用户管理</title>
    <!-- 线上环境 -->
    <link rel="stylesheet" href="/static/css/dist/component-min.css">
    <link rel="stylesheet" href="/static/plugins/jbox/jbox-min.css">

    <!--vue-->
    <script src="/static/vue/vue.js"></script>
    <!--element ui-->
    <script src="/static/element/index.js"></script>
    <link rel="stylesheet" href="/static/element/index.css">
    <style>
        .el-table__empty-block {
            height: 0;
        }
        .el-upload__files {
            display: none;
        }
        .img-delete:before {
            position: absolute;
            top: -5px;
            color: red;
            margin-left: -10px;
            z-index: 999;
        }
        .preview {
            width: 377px;
            height: 667px;
            display: inline-block;
            border: 1px dashed #ececec;
            border-radius: 5px;
            overflow: hidden;
        }
        .preview-mask {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            background-color: rgba(0,0,0,0.5);
            z-index: 10;
            text-align: center;
        }
    </style>

</head>
<body class="cp-bodybox">
<div id="app">
    <#include "/common/header-fg.html" />

    <div class="container">
        <div class="inner clearfix">
            <#include "/common/left-menu-fg.html" />

            <div class="content-right">
                <h1 class="content-right-title">{{title}}</h1>
                <div>
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span style="line-height: 36px;">基本信息</span>
                        </div>
                        <el-form label-width="100px" ref="addForm" :model="addForm" :rules="rules">
                            <el-form-item label="名称" prop="name">
                                <el-input v-model="addForm.name" placeholder="请输入名称" style="width: 200px" :disabled="readonly"></el-input>
                            </el-form-item>
                            <el-form-item label="专题介绍" prop="desc">
                                <el-input type="textarea" v-model="addForm.desc" style="width:800px;" :disabled="readonly"></el-input>
                            </el-form-item>
                            <el-form-item label="Banner" prop="picUrls">
                                <div v-for="(item, index) in addForm.picUrls" style="display: inline-flex;position: relative">
                                    <img height="100" v-if="item !== ''" :src="qiniuUrl + item">
                                    <i class="el-icon-circle-close img-delete" v-if="item !== '' && !readonly" @click="deleteImg(index)">
                                    </i>
                                </div>
                                <el-upload
                                        style="display: inline-block"
                                        action="/file/upload"
                                        :before-upload="beforeUpload"
                                        :on-success="uploadBannerSuccess"
                                        :show-file-list="false">
                                    <el-button type="primary" :disabled="readonly" v-if="readonly != true">上传图片</el-button>
                                    <div slot="tip" class="el-upload__tip" v-if="readonly != true">只能上传jpg/png文件，且不超过500kb</div>
                                </el-upload>
                            </el-form-item>
                        </el-form>
                    </el-card>
                    <yiqi-select-item ref="selectItem" :item-common-dialog="selectItemDialog" :check-list="tableData" :checked-ids="checkedIds" :save-callback="saveCallback" :cancel-callback="cancelCallback"></yiqi-select-item>
                    <el-card class="box-card" style="margin-top: 10px">
                        <div slot="header" class="clearfix">
                            <span style="line-height: 36px;">商品信息</span>
                            <el-button type="primary" style="float: right;" @click.native.prevent="showDialog" :disabled="readonly" v-if="readonly != true">添加</el-button>
                        </div>
                        <el-table
                                :data="tableData"
                                border
                                style="width: 100%">
                            <el-table-column
                                    type="index"
                                    label="序号"
                                    width="80">
                            </el-table-column>
                            <el-table-column
                                    prop="name"
                                    label="商品"
                                    width="180">
                            </el-table-column>
                            <el-table-column
                                    prop="orgName"
                                    label="商家">
                            </el-table-column>
                            <el-table-column
                                    prop="insertUser"
                                    label="创建人">
                            </el-table-column>
                            <el-table-column
                                    prop="insertTime"
                                    label="创建时间">
                            </el-table-column>
                            <el-table-column
                                    align="center"
                                    label="操作"
                                    inline-template
                                    v-if="readonly != true">
                                <div style="margin-left: -10px">
                                    <el-dropdown>
                                        <el-button size="small" type="primary" :disabled="readonly" v-if="readonly != true">
                                            操作<i class="el-icon-caret-bottom el-icon--right"></i>
                                        </el-button>
                                        <el-dropdown-menu slot="dropdown" align="center">
                                            <el-dropdown-item><el-button size="mini" type="primary" :disabled="readonly" @click.native.prevent="moveUp($index)" v-if="$index !== 0">上移</el-button></el-dropdown-item>
                                            <el-dropdown-item><el-button size="mini" type="primary" :disabled="readonly" @click.native.prevent="deleteRow($index)">删除</el-button></el-dropdown-item>
                                        </el-dropdown-menu>
                                    </el-dropdown>
                                </div>
                            </el-table-column>
                        </el-table>
                    </el-card>
                    <div style="text-align: center;margin-top: 10px" v-if="!readonly">
                        <el-button type="primary"  @click="save" :disabled="readonly" v-if="readonly != true">保存</el-button>
                        <el-button type="primary" :disabled="readonly" v-if="readonly != true" @click.native.prevent="preview">预览</el-button>
                        <el-button @click="cancel" :disabled="readonly" v-if="readonly != true">取消</el-button>
                    </div>
                    <div style="text-align: center;margin-top: 10px" v-else>
                        <el-button @click="cancel">返回</el-button>
                    </div>
                </div>
            </div>
            <!-- end content-right -->

            <a href="javascript:;" class="btn-leftMenuFold" id="j-btn-leftMenuFold"></a>
        </div>
    </div>
    <!-- end container -->

    <!--gonggao-->

    <!--tip-->
    <div class="footer">© 2017 , Inc. All rights reserved.</div>
    <!-- end footer -->
    <div class="fixedBar" style="right: -78px;">
        <ul>
            <template v-for="(item, index) in leftMenuList">
                <li v-if="index==0" :class="'shopManager' + index + ' cur'"><a href="javascript:;" :data-target="'#shop_' + index">{{item.groupName}}</a></li>
                <li v-else :class="'shopManager' + index"><a href="javascript:;" :data-target="'#shop_' + index">{{item.groupName}}</a></li>
            </template>
        </ul>
        <a href="javascript:;" class="fixedBar-btn" id="j-fixedBar-btn"></a>
    </div>
    <a href="#" id="j-gotop" class="gotop" title="回到顶部" style="left: 1920.59px;"></a>
    <!--<div class="preview-mask" style="display: none">-->
        <!--<div class="preview" style="margin-top: 30px">-->
            <!--<iframe src="http://192.168.7.7:8080/#/typeSpecial?id=41" width="375" height="667" border="0" frameborder="0">-->

            <!--</iframe>-->
        <!--</div>-->
    <!--</div>-->
</div>
<script src="/static/js/dist/lib-min.js"></script>
<script src="/static/js/dist/list.js"></script>
<script src="/static/js/dist/component-min.js"></script>

<!-- 引入api -->
<script src="/static/js/api.js"></script>

<!-- 引入共通js -->
<script src="/static/js/common.js"></script>

<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                user: ${(user)!'null'},
                qiniuUrl: list.qiniuUrl,
                addForm: {
                    name: '',
                    desc: '',
                    picUrls: []
                },
                rules: {
                    name: [
                        {required: true, message: "专题名称不能为空"}
                    ],
                    desc: [
                        {required: true, message: "专题介绍不能为空"}
                    ],
                    picUrls: [
                        { type: 'array', required: true, message: '请上传图片'}
                    ]
                },
                id: '',
                detail: ${detail},
                readonly: ${readonly},
                title: '添加分类专题',
                selectItemDialog: false,
                checkedIds: [],
                tableData: [],
                headerNavList: list.headerNavList,
                accountNavList: list.accountNavList,
                leftMenuList: list.menu
            }
        },
        mounted: function () {
            if (this.detail !== false) {
                let that = this;
                this.id = this.detail.id;
                this.addForm.name = this.detail.name;
                this.addForm.desc = this.detail.desc;
                this.addForm.picUrls = this.detail.picUrls;
                this.detail.items.forEach(function (item) {
                    that.checkedIds.push(item.itemId);
                    let obj = {
                        name: item.itemName,
                        id: item.itemId,
                        orgName: item.orgName,
                        insertUser: item.insertUser,
                        insertTime: item.insertTime
                    }
                    that.tableData.push(obj);
                })
                if (this.readonly) {
                    this.title = "分类专题详情";
                } else {
                    this.title = "编辑分类专题";
                }
            } else {
                this.addForm.name = "";
                this.addForm.desc = "";
                this.title = "添加分类专题";
            }
        },
        methods: {
            preview () {

            },
            cancel () {
                window.location.href = "/special/type/index";
            },
            deleteImg (index) {
                this.addForm.picUrls.splice(index, 1);
            },
            saveCallback () {
                this.checkedIds = this.$refs.selectItem.checked;
                this.tableData = this.$refs.selectItem.checkedData;
                this.selectItemDialog = false;
            },
            cancelCallback () {
                this.selectItemDialog = false;
            },
            showDialog () {
                this.selectItemDialog = true;
            },
            save () {
                let that = this;
                let isValid1 = true;
                this.$refs.addForm.validate(function (valid) {
                    if (!valid) {
                        isValid1 = false
                    }
                })
                let checkedIds = [];
                this.tableData.forEach(function (item) {
                    checkedIds.push(item.id);
                })
                if (isValid1) {
                    let obj = {};
                    let url = "";
                    let success = "";
                    if (this.id === "") {
                        obj = {
                            itemIds: checkedIds,
                            name: this.addForm.name,
                            picUrls:this.addForm.picUrls,
                            desc: this.addForm.desc
                        }
                        url = "/special/type/insert";
                        success = "添加成功";
                    } else {
                        obj = {
                            id: this.id,
                            itemIds: checkedIds,
                            name: this.addForm.name,
                            picUrls:this.addForm.picUrls,
                            desc: this.addForm.desc
                        }
                        url = "/special/type/update";
                        success = "编辑成功";
                    }
                    let loading = this.$loading({fullscreen: true, lock: true});
                    this.http(url, obj, function (res) {
                        if (res.status === 200) {
                            loading.close();
                            that.$alert(success, '提示', {
                                confirmButtonText: '确定',
                                closeOnClickModal: false,
                                callback: function () {
                                    window.location.href = "/special/type/index";
                                }
                            });
                        } else {
                            loading.close();
                            that.$alert(res.errMsg, '提示', {
                                confirmButtonText: '确定',
                            });
                        }
                    }, function (res) {
                        loading.close();
                        that.$alert('服务器错误', '提示', {
                            confirmButtonText: '确定',
                        });
                    })
                } else {
                    this.$message.error('请完善信息');
                }
            },
            deleteRow(index){
                this.checkedIds.splice(index, 1);
                this.tableData.splice(index,1);
            },
            uploadBannerSuccess(response,file){
                if (response.status === 100) {
                    let bannerUrl = response.returnValue[0].id + this.imgType;
                    this.addForm.picUrls.push(bannerUrl);
                } else {
                    this.$alert('上传失败', '提示', {
                        confirmButtonText: '确定',
                    });
                }
            },
            beforeUpload (file) {
                if (file.type === "image/png") {
                    this.imgType = ".png";
                    return true;
                } else if (file.type === "image/jpeg") {
                    this.imgType = ".jpg";
                    return true;
                } else {
                    this.$message.error('上传头像图片只能是 JPG 或 png 格式!');
                    return false;
                }
            },
            moveUp(a){
                this.tableData[a -1] = this.tableData.splice(a, 1, this.tableData[a - 1])[0];
            }
        }
    })
</script>

<!-- 20170105 --></body>
</html>